<template>
    <el-main>

        <!-- 添加一个div元素，设置其高度为15px -->
        <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
            烧结原料及其配比
        </div>
        <!-- 烧结矿表格 -->
        <el-table :data="materialData" ref="materialTable" stripe style="width: 100%; border-radius: 10px" border
            :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
            :cell-style="{ padding: '2px' }">
            <el-table-column prop="iconoreName" label="原料名称" label-class-name="bold-header" />
            <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
            <el-table-column prop="manualProportion" label="基线配比" label-class-name="bold-header" />
            <el-table-column prop="autoProportion" label="优化配比" label-class-name="bold-header" />
        </el-table>
        <!-- 添加一个div元素，设置其高度为15px -->
        <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
            烧结矿成本
        </div>
        <!-- 烧结矿成本表格 -->
        <el-table :data="costData" ref="costTable" stripe style="width: 100%; border-radius: 10px" border
            :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
            :cell-style="{ padding: '2px' }">
            <el-table-column prop="costName" label="名称" label-class-name="bold-header" />
            <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
            <el-table-column prop="manualValue" label="基线值" label-class-name="bold-header" />
            <el-table-column prop="autoValue" label="优化值" label-class-name="bold-header" />
            <el-table-column prop="changeValue" label="变动值" label-class-name="bold-header" />
        </el-table>
        <!-- <div style="height: 40px; background-color: transparent;"></div> -->
        <!-- <div style="height: 40px; background-color: transparent;"></div> -->
        <!-- 添加一个div元素，设置其高度为15px -->
        <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
            烧结矿理论成分
        </div>
        <el-table :data="lilunzhiData" ref="lilunzhiTable" stripe style="width: 100%; border-radius: 10px" border
            :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
            :cell-style="{ padding: '2px' }">
            <el-table-column prop="lilunzhiName" label="名称" label-class-name="bold-header" />
            <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
            <el-table-column prop="manualValue" label="基线值" label-class-name="bold-header" />
            <el-table-column prop="autoValue" label="优化值" label-class-name="bold-header" />
            <el-table-column prop="changeValue" label="变动值" label-class-name="bold-header" />
            <el-table-column prop="is_constaint" label="是否满足约束" label-class-name="bold-header" />
        </el-table>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            costData: [
                { costName: "烧结矿成本", key: "cost", unit: "元/吨", manualValue: null, autoValue: null },
                // { costName: "混匀矿成本", unit: "元/吨" },
                // { costName: "厂内矿成本", unit: "元/吨" },
                // { costName: "燃料成本", unit: "元/吨" },
                // { costName: "熔剂成本", unit: "元/吨" },
            ],
            lilunzhiData: [
                { lilunzhiName: "烧结矿铁品位", key: "tfe", unit: "%", manualValue: null },
                { lilunzhiName: "CaO", key: "cao", unit: "%", manualValue: null },
                { lilunzhiName: "SiO2", key: "sio2", unit: "%", manualValue: null },
                { lilunzhiName: "MgO", key: "mgo", unit: "%", manualValue: null },
                { lilunzhiName: "Al2O3", key: "al2o3", unit: "%", manualValue: null },
                { lilunzhiName: "S", key: "s", unit: "%", manualValue: null },
                { lilunzhiName: "P", key: "p", unit: "%", manualValue: null },
                { lilunzhiName: "Mn", key: "mn", unit: "%", manualValue: null },
            ],
            materialData: []
        }
    },
    created() {
        let query = this.$route.query;
        console.log("query", query);
        console.log("resData", query.resData);
        console.log("resData2", query.resData2);
        let data = JSON.parse(query.resData);
        let data2 = JSON.parse(query.resData2);
        let data3 = JSON.parse(query.orebleed);
        let cost = data2.result.cost;
        let theory = data2.theory;
        console.log("data3:", data3);

        console.log("cost", cost);
        // let data3 = JSON.parse(query.resData2.result);
        console.log("data", data);
        console.log("data2", data2);
        // console.log("data3", data3);
        this.lilunzhiData.forEach(item => { // 遍历lilunzhiData数组
            console.log("进入方法");
            if (data[item.key]) { // 如果resData中有对应的属性值
                // console.log("进入if方法");
                item.manualValue = data[item.key]; // 手动计算的值赋值给manualValue属性
                item.autoValue = theory[item.key]; // 自动计算的值赋值给autoValue 
                item.changeValue = (item.autoValue - item.manualValue).toFixed(2); //计算变动值
                item.is_constaint = "ok";
            }
        });
        this.costData.forEach(item => { // 遍历lilunzhiData数组
            console.log("进入方法");
            if (data[item.key]) { // 如果resData中有对应的属性值
                // console.log("进入if方法");
                item.manualValue = data[item.key]; // 将其赋值给manualValue属性
                // item.autoValue = cost;
                item.autoValue = Math.round(cost * 100) / 100;
                // console.log(item.autoValue);
                item.changeValue = (item.autoValue - item.manualValue).toFixed(2); //计算变动值
            }
        });
        //将data3里面每个对象的iconoreName属性赋值给表格每一行的iconoreName属性
        //遍历data3，将每个对象的iconoreName属性的值赋给materialData数组中对应的对象的iconoreName属性
        for (let item of data3) {
            item.manualProportion = item.proportion;
            this.materialData.push(item);
        }
        let num = 0;
        this.materialData.forEach(item => {
            console.log("进入material");
            item.autoProportion = data2.result.ratio[num];
            num = num + 1;
            item.autoProportion = item.autoProportion.toFixed(2);
            item.unit = "%";
        })
    }

}
</script>


<style>
.bold-header {
    font-weight: bold;
    color: black;
    /* background-color: azure; */
}
</style>